<template>
  <div>
    <div class="topBody">
      <!-- <div class="topBodyItem" style="margin-left: -20px">
        <span class="itemSpan">供应商</span>
        <Select
          v-model="form.supplierId"
          clearable
        placeholder="请选择供应商"
          class="itemImport"
        >
          <Option v-for="item in supplyTree" :value="item.id" :key="item.id">{{
            item.name
          }}</Option>
        </Select>
      </div>
      <div class="topBodyItem" style="margin-left: -10px">
        <span class="itemSpan">物资分类</span>
        <Select
          placeholder="请选择物资分类"
          v-model="form.goodsTypeName"
          clearable
          style="width: 200px"
        >
          <Option
            v-for="item in materialTypeList"
            :value="item.categoryName"
            :key="item.categoryName"
          >
            {{ item.categoryName }}</Option
          >
        </Select>
      </div>
      <div class="topBodyItem" style="margin-left: -10px">
        <span class="itemSpan">物资名称</span>
        <Input
          class="flex"
          clearable
          placeholder="请输入物资名称"
          v-model="form.productName"
          style="width: 200px"
        />
      </div> -->
      <div class="topBodyItem" style="margin-left: -30px">
        <span class="itemSpan">来源</span>
        <Select
          v-model="form.origin"
          placeholder="请选择来源"
          clearable
          style="width: 200px"
        >
          <Option
            v-for="item in originTree"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="topBodyItem">
        <cus-Button
          class="ml_20 mr_10"
          type="primary"
          @onClick="
            pages.page = 1;
            getGoodscheckListApi();
          "
          >查询</cus-Button
        >
        <cus-Button class="mr_10" type="primary" @onClick="reset()"
          >重置</cus-Button
        >
      </div>
    </div>
    <cusTable
      border
      :loading="loading"
      :columns="columns"
      :data="data"
      :size="vuex_config.tableSize"
      :bottomClass="['cus-page']"
    >
      <template slot-scope="{ row, index }" slot="operation">
        <div class="flex">
          <cus-button
            type="text"
            size="small"
            :style="{ color: '#1E6FFF' }"
            style="padding: 0 8px"
            @onClick="onExport(row)"
          >
            <Icon
              type="ios-download-outline"
              size="4"
              style="margin: 2px 5px 0 0"
            />
            <span>导出</span>
          </cus-button>
          <cus-button
            type="text"
            size="small"
            :style="{ color: '#1E6FFF' }"
            style="padding: 0 8px"
            @onClick="onShow(row)"
          >
            <Icon type="ios-search" size="4" style="margin: 2px 5px 0 0" />
            <span>{{ row.status == "doing" ? "盘点" : "盘点明细" }}</span>
          </cus-button>
          <cus-button
            type="text"
            v-if="row.status == 'checkPending'"
            size="small"
            :style="{ color: '#1E6FFF' }"
            style="padding: 0 8px"
            @onClick="getGoodscheckFinishCheckApi(row)"
          >
            <Icon type="md-calendar" size="4" style="margin: 2px 5px 0 0" />
            <span>审核</span>
          </cus-button>
        </div>
      </template>
    </cusTable>
    <div class="cus_page">
      <cus-page
        :data="pages"
        class="mt_10"
        @pageChange="getGoodscheckListApi()"
      ></cus-page>
    </div>
    <!--盘点记录详情-->
    <inventoryRecordsDetails
      ref="inventoryRecordsDetails"
    ></inventoryRecordsDetails>
  </div>
</template>

<script>
import {
  getBasstockList,
  getApiGoodsHandaworkSuppliername,
  getGoodscheckList,
  exportCheck,
  getGoodscheckFinishCheck
} from "@/api/business/manager";

import inventoryRecordsDetails from "./components/inventoryRecordsDetails.vue";
import { getProductCategory } from "@/api/business/dishesModule";
export default {
  components: { inventoryRecordsDetails },
  data() {
    return {
      loading: false,
      form: {
        stockId: "", // 仓库id
        supplierId: "", // 供应商id
        goodsTypeName: "", // 物资分类名称
        productName: "", // 物资名称
        origin: "" //来源
      },
      originTree: [
        {
          label: "手工盘点",
          value: "BY_HAND"
        },
        {
          label: "电子秤盘点",
          value: "FROM_ELECTRIC"
        }
      ], //来源tree数据
      ruleValidate: {},
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70
        },
        {
          title: "盘点单号",
          key: "checkNumber",
          align: "center",
          minWidth: 145
        },
        {
          title: "盘点人",
          key: "updatorName",
          align: "center",
          minWidth: 100
        },
        {
          title: "盘点开始",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h("span", new Date(params.row.startTime).Format("yyyy-MM-dd"))
            ]);
          }
        },
        {
          title: "盘点结束",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                params.row.endTime != null
                  ? new Date(params.row.endTime).Format("yyyy-MM-dd")
                  : ""
              )
            ]);
          }
        },
        {
          title: "盘点状态",
          key: "status",
          align: "center",
          minWidth: 100,
          // 盘点的状态。doing：待盘点。checkPending: 待审核。finished：已完成。
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    background:
                      params.row.status == "doing"
                        ? "rgb(255, 153, 0)"
                        : params.row.status == "checkPending"
                        ? "#FF9900"
                        : "#19BE6B",
                    padding: "5px",
                    color: "#FFFFFF"
                  }
                },
                params.row.status == "doing"
                  ? "待盘点"
                  : params.row.status == "checkPending"
                  ? "待审核"
                  : params.row.status == "finished"
                  ? "已完成"
                  : ""
              )
            ]);
          }
        },
        {
          title: "来源",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                params.row.origin == "BY_HAND" ? "手工盘点" : "电子秤盘点"
              )
            ]);
          }
        },
        {
          title: "操作",
          fixed: "right",
          slot: "operation",
          align: "center",
          width: 200
        }
      ],
      data: [],
      storehouseTree: [], // 存储仓tree数据
      supplyTree: [], // 供应商tree数据
      materialTypeList: [], // 物资分类tree数据
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },
  mounted() {
    this.onInit();
  },
  activated() {},
  methods: {
    onInit() {
      this.getBasstockListApi();
      this.getApiGoodsHandaworkSuppliernameApi();
      this.getBasicMaterialTypeApi();
      this.getGoodscheckListApi();
    },
    reset() {
      this.form = {
        stockId: "", // 仓库id
        supplierId: "", // 供应商id
        goodsTypeName: "", // 物资分类名称
        productName: "", // 物资名称
        origin: "" //来源
      };
      this.getGoodscheckListApi();
    },
    onShow(row) {
      this.$refs["inventoryRecordsDetails"].show(row);
    },
    onExport(row) {
      window.location.href = exportCheck(row.id);
    },
    // 物资仓库列表----------------接口
    getBasstockListApi() {
      return new Promise(resolve => {
        let params = {
          current: 1,
          size: 1000
        };
        getBasstockList(params).then(res => {
          if (res.retCode == 2000) {
            this.storehouseTree = res.data.records;
            resolve();
          }
        });
      });
    },
    // 获取供应商名称
    getApiGoodsHandaworkSuppliernameApi() {
      return new Promise(resolve => {
        getApiGoodsHandaworkSuppliername().then(res => {
          if (res.retCode == 2000) {
            this.supplyTree = res.data;
          }
          resolve();
        });
      });
    },
    // 获取物资分类-----------------接口
    getBasicMaterialTypeApi() {
      return new Promise(resolve => {
        getProductCategory().then(res => {
          if (res.code == 1) {
            this.materialTypeList = res.result;
            resolve();
          }
        });
      });
    },
    // 物资盘点明细列表----------------接口
    getGoodscheckListApi() {
      this.loading = true;
      return new Promise(resolve => {
        let params = {
          stockId: this.form.stockId,
          supplierId: this.form.supplierId,
          goodsTypeName: this.form.goodsTypeName,
          productName: this.form.productName,
          origin: this.form.origin,
          current: this.pages.page,
          size: this.pages.pageSize
        };
        getGoodscheckList(params).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 审核物资盘点------------------接口
    getGoodscheckFinishCheckApi() {
      this.loading = true;
      return new Promise(resolve => {
        getGoodscheckFinishCheck({}).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg);
            this.getGoodscheckListApi();
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.topBody {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
  .topBodyItem {
    margin-right: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .itemSpan {
      white-space: nowrap;
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-right: 10px;
    }
    .itemImport {
      width: 200px;
    }
  }
}
</style>
